<!--
 * @Date: 2022-09-13 11:11:52
 * @LastEditors: admin@54xavier.cn
 * @LastEditTime: 2023-10-09 16:33:55
 * @FilePath: \electron-hiprint\assets\index.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>hiprint</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="./element-ui@2.15.14.theme-chalk.index.min.css"
    />
  </head>

  <body>
    <div class="box">
      <div class="background">
        <div class="bg-primary active"></div>
        <div class="bg-success"></div>
        <div class="bg-warning"></div>
      </div>
      <div class="container">
        <div class="info">
          <div class="title">
            打印服务已启动<i id="seticon" class="el-icon-setting"></i>
          </div>
          <div class="message row">服务地址：<span id="ipAddress"></span></div>
          <div class="message row">MAC地址：<span id="macAddress"></span></div>
        </div>
        <div class="status">
          <div class="message" data-prop="transitStatus">
            中转状态: <span id="transitStatus">未连接</span>
          </div>
          <div class="message" data-prop="connectionStatus">
            本地连接：<span id="connectionStatus">未连接</span>
          </div>
          <div class="message" data-prop="printedQueue">
            打印状态：<span id="printedQueue">空闲</span>
          </div>
          <div class="message row">设备编号：<span id="deviceId"></span></div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      window.$ = window.jQuery = require("jquery");
      const { ipcRenderer, clipboard } = require("electron");
      let ipc = ipcRenderer;
      $(document).ready(() => {
        $("#seticon").click(() => {
          ipc.send("openSetting");
        });
        $("#ipAddress,#macAddress,#deviceId").click((event) => {
          clipboard.writeText(event.target.innerText);
          ipc.send("notification", {
            title: "复制成功",
            body: "文本已成功复制到剪贴板中！",
          });
        });
        ipc.send("getMachineId");
        ipc.on("machineId", (event, arg) => {
          $("#deviceId").html(arg);
        });
        ipc.send("getAddress");
        ipc.on("address", (event, arg) => {
          $("#ipAddress").html(`http://${arg.ip}:${arg.port || 17521}`);
          $("#macAddress").html(arg.mac);
        });
        ipc.on("serverConnection", socketActive);
        ipc.on("printTask", (event, arg) => {
          $("#printedQueue").html(arg ? "文档打印中" : "空闲");
          $(".bg-warning")[arg ? "addClass" : "removeClass"]("active");
        });
        ipc.on("clientConnection", transitActive);
      });
      function socketActive(event, arg) {
        console.log("socketActive", arg)
        $("#connectionStatus").html(
          `${arg ? "已建立 " + arg + " 条" : "未"}连接`
        );
        $(".bg-success")[arg ? "addClass" : "removeClass"]("active");
      }
      function transitActive(event, arg) {
        console.log("transitActive", arg)
        $("#transitStatus").html(`${arg ? "已" : "未"}连接`);
        $(".bg-success")[arg ? "addClass" : "removeClass"]("active");
      }
    </script>
  </body>
</html>
